<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>课程页</title>
    <script src="../js/jquery-3.5.1.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

    <script type="text/javascript" th:inline="javascript">
        var modify = 1;
        function clear(){
            $("#task").val("");
            $("#content").val("");
            $("#evaluation").val("");
            $("#time").val("");
            $("#gradeSelect").html("");
            $("#teacherSelect").html("");
        }

        function add(){
            modify = 1;
            $(".modal-title").html("课程信息添加");
            clear();
            prep(0);
        }

        function edit(id){
            modify = 0;
            $(".modal-title").html("课程信息编辑");
            $.get("/announcement/query",{id:id},function (announce){
                $("#id").val(announce.id);
                $("#title").val(announce.title);
                $("#content").val(announce.content);
                let d = announce.date;
                $("#date").val(d);
            });
            prep(id);
        }

        function prep(id){
            $.get("/course/prepare",{id:id},function(map){
                let grades = map["grades"];
                let teachers = map["teachers"];
                let gradeSelect = $("#gradeSelect");
                let teacherSelect = $("#teacherSelect");
                let course;
                if (id != 0){
                    course = map["course"];
                    $("#id").val(id);
                    $("#task").val(course.task);
                    $("#content").val(course.content);
                    console.log(course.time);
                    $("#evaluation").val(course.evaluation);
                }
                gradeSelect.append("<option style='text-align: center' value='0'>--请选择--</option>");
                for(let grade of grades){
                    if (course!=null && course.id!=null && course.gradeId==grade.id){
                        gradeSelect.append("<option value='"+grade.id+"' selected>"+grade.name+"</option>");
                    }else {
                        gradeSelect.append("<option value='"+grade.id+"'>"+grade.name+"</option>");
                    }
                }
                teacherSelect.append("<option style='text-align: center' value='0'>--请选择--</option>");
                for(let teacher of teachers){
                    if (course!=null && course.id!=null && course.teacherId==teacher.id){
                        teacherSelect.append("<option value='"+teacher.id+"' selected>"+teacher.name+"</option>");
                    }else {
                        teacherSelect.append("<option value='"+teacher.id+"'>"+teacher.name+"</option>");
                    }
                }
            },"json");
        }

        function save(){
            let data = {
                id:$("#id").val(),
                task:$("#task").val(),
                content:$("#content").val(),
                evaluation:$("#evaluation").val(),
                gradeId:$("#gradeSelect").val(),
                teacherId:$("#teacherSelect").val(),
                dateTime:$("#datTime").val(),
                modify:modify
            };
            $.post("/course/save",data,function(res){
                if (res){
                    location.reload();
                    $("#editModal").modal('hide');
                }
            },"json");

        }

        function del(id){
            if (confirm("请确认是否删除？")){
                $.get("/course/del",{id:id},function(res){
                    if (res){
                        location.reload();
                    }
                })
            }
        }

        function search(){
            let task = $("#condition").val();
            window.location.href = "http://localhost:313/course/page?task=" + task;
        }

        function inputLoad(){
            let searchInput = [[${task}]];
            if (searchInput != null){
                $("#condition").val(searchInput);
            }
        }

        function homePage(){
            let task = $("#condition").val();
            window.location.href = "http://localhost:313/course/page?pageNum=1&task=" + task;
        }

        function prePage(){
            let task = $("#condition").val();
            window.location.href = "http://localhost:313/course/page?pageNum=" + [[${current - 1}]] + "&task=" + task;
        }

        function nextPage(){
            let task = $("#condition").val();
            window.location.href = "http://localhost:313/course/page?pageNum=" + [[${current + 1}]] + "&task=" + task;
        }

        function lastPage(){
            let task = $("#condition").val();
            window.location.href = "http://localhost:313/course/page?pageNum=" + [[${lastPage}]] + "&task=" + task;
        }
    </script>
</head>
<style>
    table {
        text-align: center;
    }

    #searchButton {
        position: absolute;
        margin-top: -1px;
    }
</style>
<body onload="inputLoad()">
    <h1>课程页</h1>
        <div class="row">
            <div class="col-lg-3">
                <div class="input-group">
                    <input id="condition" type="text" class="form-control" placeholder="请输入课程标题">
                    <span class="input-group-btn">
                            <button class="glyphicon glyphicon-search btn btn-default" id="searchButton" onclick="search()">
                            </button>
                    </span>
                </div>
            </div>
        </div>
        <button th:if="${session.user.identityNum == 1 || session.user.identityNum == 3}" id="add" class="btn btn-success" data-toggle="modal" data-target="#editModal" onclick="add()">新增</button>
    <table class="table  table-bordered table-hover">
        <tr>
            <td>课题</td>
            <td>内容</td>
            <td>评价</td>
            <td>时间</td>
            <td>教师</td>
            <td>班级</td>
            <td th:if="${session.user.identityNum == 1 || session.user.identityNum == 3}">操作</td>
        </tr>
        <tr th:each="course:${courses}">
            <td th:text="${course.task}"></td>
            <td th:text="${course.content}"></td>
            <td th:text="${course.evaluation}"></td>
            <td th:text="${#dates.format(course.time,'yyyy-MM-dd HH:mm:ss')}"></td>
            <td><a th:text="${course.teacherName}" th:href="'/course/teacherDetail?teacherId='+${course.teacherId}"></a></td>
            <td><a th:text="${course.gradeName}" th:href="'/grade/pageChildren?id='+${course.gradeId}"></a></td>
            <td th:if="${session.user.identityNum == 1 || session.user.identityNum == 3}">
                <a class="glyphicon glyphicon-pencil"  data-toggle="modal" data-target="#editModal" th:onclick="edit([[${course.id}]])"></a>&nbsp;&nbsp;
                <a class="glyphicon glyphicon-trash" th:onclick="del([[${course.id}]])"></a>
            </td>
        </tr>
        <tr>
            <td colspan="7">
                <button class="btn btn-primary" onclick="homePage()">首页</button>&nbsp;&nbsp;<button class="btn btn-primary" onclick="prePage()">上一页</button>&nbsp;&nbsp;<p style="display: inline" th:text="'总共'+${total}+'条记录 当前第'+${current}+'页'"></p>&nbsp;&nbsp;<button class="btn btn-primary" onclick="nextPage()">下一页</button>&nbsp;&nbsp;<button class="btn btn-primary" onclick="lastPage()">尾页</button>
            </td>
        </tr>
    </table>


    <div class="modal fade" tabindex="-1" role="dialog" id="editModal">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h2 class="modal-title"></h2>
                </div>
                <div class="modal-body">
                    <form id="editForm">
                        <table class="table table-bordered table-striped">
                            <input id="id" class="form-control" type="hidden" name="id" hidden/>
                            <tr>
                                <td>课题</td>
                                <td><input id="task" class="form-control" type="text" name="task" /></td>
                            </tr>
                            <tr>
                                <td>内容</td>
                                <td><textarea id="content" class="form-control" name="content" rows="10" cols="15"></textarea></td>
                            </tr>
                            <tr>
                                <td>评价</td>
                                <td><input id="evaluation" class="form-control" type="text" name="evaluation" /></td>
                            </tr>
                            <tr>
                                <td>日期</td>
                                <td><input id="datTime" type="datetime-local" class="form-control" name="datTime"></td>
                            </tr>
                            <tr>
                                <td>教师</td>
                                <td>
                                    <select id="teacherSelect" class="form-control" name="teacherId">
                                    </select>
                                </td>
                            </tr>
                            <tr>
                                <td>班级</td>
                                <td>
                                    <select id="gradeSelect" class="form-control" name="gradeId">
                                    </select>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" onclick="save()">保存</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
</body>
</html>